<template>
  <div class="lend_goods_mobile_wrap">
    <div class="nav_box">
      <van-nav-bar title="借还记录" left-text="返回" left-arrow @click-left="returnClick" />
    </div>

    <!-- 占位盒子 -->
    <div class="placeholder_box_top"></div>

    <!-- <van-loading v-if="lendGoodStore.isLendReturnLogsLoading" class="logs_loading" type="spinner" color="#1989fa" vertical>
      加载中
    </van-loading> -->

    <!-- 借还记录盒子 -->
    <div class="lend_return_log_box">
      <div class="log_item_box" v-for="(log, indexL) in lendGoodStore.currentLendReturnLogs" :key="indexL">
        <div class="title_box">
          <div class="left_box">
            <img class="log_icon" src="./image/log.svg" alt="" />
            <span class="time">{{ log.createTime }}</span>
          </div>
          <div class="right_box">
            <van-tag round size="medium" v-if="log.makeName == '归还'" type="success">归还</van-tag>
            <van-tag round size="medium" v-if="log.makeName == '借出'" type="danger">借出</van-tag>
          </div>
        </div>
        <div class="content_box">
          <!-- 操作人 -->
          <div class="field_item_box">
            <span class="label">操作人：</span>
            <span class="value">{{ log.userName }}</span>
          </div>

          <!-- 借出/归还数量  -->
          <div class="field_item_box">
            <span class="label">{{ `${log.makeName}数量：` }}</span>
            <span class="value">{{ log.makeQuantity }}</span>
          </div>

          <!-- 可用存量  -->
          <div class="field_item_box">
            <span class="label">可用存量：</span>
            <span class="value">{{ log.quantity }}</span>
          </div>

          <!-- 备注  -->
          <div class="field_item_box">
            <span class="label">备注：</span>
            <!-- <span class="value desc"
              >112e[ksal;dkasl;kdlaskfjasdjfldjhasl;daskdl;asdl;a大数据库大卡司克拉斯daskl;dkasl;kdaslksdakl;asl;daskl;dkl;sakl;dkasldl;dkasl;dksakdsalkdasl;kl;dskdasl;djasl;asdjjkl;]</span
            > -->
            <span class="value desc">{{ `${log.lendDesc != "" ? log.lendDesc : "无"}` }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 空记录 -->
    <van-empty
      v-if="lendGoodStore.currentLendReturnLogs.length == 0 && !lendGoodStore.isGoodListLoading"
      image="search"
      description="暂无记录"
    />
  </div>
</template>

<script>
import { defineComponent, onMounted } from "vue";
//   import { showConfirmDialog, showToast } from "vant";
import "./index.scss";
export default defineComponent({
  name: "LendReturnLogMobile"
});
</script>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { useLendGoodStore } from "@/stores/modules/lendGood";
//   import { lendTbGoodsApi } from "@/api/modules/goods/index";
//   import { v4 as uuidv4 } from "uuid";

const lendGoodStore = useLendGoodStore();
const router = useRouter();

const route = useRoute();

// 返回点击事件
const returnClick = () => {
  router.back();
};

// init
onMounted(() => {
  console.log(route.query);
  // 判断数据是否为空
  //   if (lendGoodStore.currentLendReturnLogs.length == 0) {
  lendGoodStore.currentLendReturnLogsGoodId = Number(route.query.id);
  lendGoodStore.lendGoodsSubListFunc();
  //   }
});
</script>

<style lang="scss" scoped></style>
